<!DOCUMENT HTML>
<html>
<head>
<meta charset='UTF-8'/>
<meta copyright='wuquanyao email:wqynqa@163.com'/>
<title>Javascript Gallery.js Example</title>
<script src='gallery.js'></script>
<style type="text/css">
    body,html{width:100%;height:100%;padding:0;margin:0;}	
	body{background:#EEEEEE;}
	.gallery{
		width:1000px;
		height:300px;
		margin:0 auto;
		overflow:hidden
	}
	.gallery .wrapper{
		width:3000px;
		height:100%;
		white-space:nowrap;
		overflow:hidden;
	}
	.gallery .wrapper a{
		display:inline-block;
		vertical-align:top;
		width:1000px;
		height:100%;
		text-decoration:none;
		list-style:none;
	}
	.gallery .dot{
		position:relative;
		width:auto;
		height:14px;
		text-align:center;
		margin-top:-30px;
		z-index:10;
	}
	.gallery .dot span{
		display:inline-block;
		vertical-align:top;
		margin-left:5px;
		border-radius:30px;
		cursor:pointer;
	}
	.gallery .dot .active{
		width:14px;
		height:14px;
		background:rgb(60,60,60);
	}
	.gallery .dot .normal{
		width:10px;
		height:10px;
		border:solid 2px rgb(255,255,255);
	}
</style>
</head>
<body>

<!--幻灯片容器
	gallery为大容器
	wrapper为图片容器
	dot为点容器-->
<div class='gallery'>

	<div class='wrapper'></div><div class='dot'></div>
	
</div>

<!--JS渲染之后模板为-->
<!--
<div class='gallery'>
	<div class='wrapper'>
		<a href='http://www.baidu.com' target='_self'><img src='xxxx.png' width='100%' height='100%'></a>
		<a href='http://www.baidu.com' target='_self'><img src='xxxx.png' width='100%' height='100%'></a>
		<a href='http://www.baidu.com' target='_self'><img src='xxxx.png' width='100%' height='100%'></a>
		<a href='http://www.baidu.com' target='_self'><img src='xxxx.png' width='100%' height='100%'></a>
	</div>
	<div class='dot'>
		<span></span><span></span><span></span><span></span>
	</div>
</div>
-->

<script>
var data = [{img:'images/a.png', link:'http://www.baidu.com', target:'_self'},
			{img:'images/b.png', link:'http://www.qq.com',  target:'_self'},
			{img:'images/c.png', link:'http://www.163.com', target:'_self'}];
	Gallery.pc({selector:'.gallery .wrapper',data:data,duration:3000,dotTag:'span'});	
</script>
<!--参数说明
selector:为CSS选择器
duration:图片切换时间间隔,单位ms
dotTag:dot容器里子标签,默认为span标签
data:填充的图片信息,img为图片路径,link跳转地址,target打开窗口类型如_self,_blank
-->
</body>
</html>